<template>
  <div class="Grid">
    <!-- <TreeFilter></TreeFilter>   -->
    <div class="table-box">
      <div class="headerBar">

        <el-tabs v-model="activeIndex" @tab-click="handleTabClick">
          <el-tab-pane v-for="(status, index) in statuses" :key="index" :name='status.key'>
            <template #label>
              <span class="custom-label">
                {{ status.label }}
                <span class="badge" v-if="status.count != 0">{{ status.count }}</span>
              </span>
            </template>
          </el-tab-pane>
        </el-tabs>
      </div>
      <ProTable :isShowSearch="false" :staffInfoData="staffInfoData" @searchOrderData="searchOrderData"
        @receiveOrder="receiveOrder" @openAddDoor="openAddDoor">
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <!-- <el-button type="primary" @click="addStaffData" :icon="CirclePlus">新增员工</el-button> -->
          <!-- <el-button type="primary" :icon="Upload" plain>批量添加员工</el-button> -->
          <!-- <el-button type="primary" :icon="Download" plain >导出用户数据</el-button> -->
        </template>
      </ProTable>
    </div>
  </div>
  <UserUpload ref="userY" @uploadSuccess="uploadSuccess"></UserUpload>



  <!-- 对话框组件 -->
  <el-dialog v-model="dialogVisible" title="订单信息" width="50%" top="6vh" :before-close="handleClose">
    <div class="order-detail">
      <!-- 订单头部信息 -->
      <div class="order-header-info">
        <div slot="header" class="clearfix">
          <div class="clearfix-text"> <span class="clearfix-text-d">订单号：</span><span class="clearfix-text-h">
              {{ orderDetailData.orderNumber }}</span></div>
          <el-button type="primary" class="clearfix-button" round @click="">{{
            orderDetailData.deliveryMethod }}</el-button>
        </div>
        <div class="text-item">
          下单时间：{{ orderDetailData.orderTime }}
        </div>
      </div>
      <hr />

      <!-- 订单详细信息 -->
      <div class="order-info">
        <div class="details">
          <div class="details-top">
            <div><span>手机号：</span><span>{{ orderDetailData.address ? orderDetailData.address.phone :
              orderDetailData.user.phone }}</span></div>
            <div><span>提货码：</span><span>{{ orderDetailData.pickupCode }}</span></div>
          </div>
          <div class="details-middle"><span>预计自提时间：</span><span>2024-08-08 16:07</span></div>
          <div class="remark">
            <div class="bj">备注</div>
            <div class="remark-text">{{ orderDetailData.notes }}</div>
          </div>
        </div>

        <!-- 商品信息 -->
        <div class="product-info">
          <div class="product-item-left">
            商品
          </div>

          <div class="product-item-right">
            <div class="product-item-right-top11">
              <div v-for="item in orderDetailData.items " :key="item.productId" class="roduct-item-right-top11-childer">
                <el-image style="width: 50px; height: 50px" :src="imgUrl() + item.goodsImg" />
                <span class="product-item-right-top1">{{ item.goodsName }}</span>
                <span class="product-item-right-top2"> x {{ item.quantity }}</span>
                <span class="product-item-right-top3">$ {{ item.subtotal }}</span>
              </div>

            </div>
            <div class="product-item-right-button">
              <span class="product-item-right-button1">商品小计：</span>
              <span class="product-item-right-button2">${{ orderDetailData.totalPrice - orderDetailData.packecharge
              }}</span>
            </div>
          </div>


        </div>

        <!-- 总计信息 -->

        <div class="product-info">
          <div class="product-item-left">
            费用
          </div>

          <div class="product-item-right">
            <div class="product-item-right-button">
              <span class="product-item-right-button1">打包费：</span>
              <span class="product-item-right-button5">${{ orderDetailData.packecharge }}</span>
            </div>
            <div class="product-item-right-top">
              <span class="product-item-right-top1">商品总计：</span>
              <span class="product-item-right-top4">${{ orderDetailData.totalPrice }}</span>
            </div>

            <div class="product-item-right-button">
              <span class="product-item-right-button1">支付渠道：</span>
              <span class="product-item-right-button6">微信支付</span>
            </div>

            <div class="product-item-right-button">
              <span class="product-item-right-button1">支付时间：</span>
              <span class="product-item-right-button7">{{ orderDetailData.payTime }}</span>
            </div>
          </div>


        </div>

      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <!-- v-model="autoSkip" -->
        <el-checkbox>处理完自动跳转下一条</el-checkbox>
        <div>
          <el-button type="primary" @click="handleConfirm">接单</el-button>
          <el-button @click="handleReject">拒单</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
  <!-- <IdenUpload ref="Iden" @succCallback="SuccCallback"></IdenUpload> -->
</template>
  
<script setup>
// //   import TreeFilter from "@/components/TreeFilter/index.vue";
import ProTable from "@/components/Protable/orderList.vue";
import SelectFilter from "@/components/SelectFilter/index.vue"
//   import UserUpload from '@/views/staff/components/userUpload.vue'
import UserUpload from '@/views/user/userUpload.vue'
// //   import IdenUpload from "@/components/idenUpload.vue";
import { ElLoading, ElMessage } from 'element-plus'
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from "@element-plus/icons-vue";
import { ref, onMounted, computed, watchEffect, getCurrentInstance, onBeforeUnmount, reactive } from "vue"
// import { staffData } from "@/stores/staff.js"
import { userManage } from "@/stores/user.js"
import { ElButton, ElDialog } from 'element-plus';
import { mainStore } from "@/stores/index.js"
import { goodsInfo } from "@/stores/goodsInfo.js"
import { baseUrl } from "@/utils/util"
//   let { proxy } = getCurrentInstance()
// //   let mStaff = staffData()
//   let mStore = mainStore()
let usermanage = userManage()
let mainstore = mainStore()
let goodsinfo = goodsInfo()
//   增加员工的实例
let userY = ref()

let orderSun = ref({})

//图片地址

let imgUrl = computed(() => {

  // console.log(tableData.storeImg,"tableData.storeImg")
  return baseUrl
})


const activeIndex = ref(0); // 默认选中第一个标签

// 订单详细信息
let orderDetailData = ref({})

// Pending = 1, // 待支付
//     ReadyForDelivery = 2, // 待配送
//     ReadyForPickup = 3, // 待自提
//     InDelivery = 4, // 配送中
//     Completed = 5, // 已完成
//     Cancelled = 6, // 已取消
//     Paid = 7, // 待接单

// 定义订单状态
const statuses = ref([
  { key: 0, label: '全部订单', count: 0 },
  { key: 7, label: '待接单', count: 0 }, // 示例数据
  { key: 2, label: '待派送', count: 0 }, // 示例数据
  { key: 3, label: '待自提', count: 0 }, // 示例数据
  { key: 4, label: '派送中', count: 0 }, // 示例数据
  { key: 5, label: '已完成', count: 0 }, // 示例数据
  { key: 6, label: '已取消', count: 0 }, // 示例数据

]);

const handleTabClick = (tab) => {
  // 获取当前点击的标签索引，并根据索引从数据库中获取相应数据
  console.log(tab, 'Selected Index:', tab.props.name);
  if (tab.props.name != 0) {
    getOrderDataOther({
      shopAddressId: mainstore.userinfo.shopAddress.id,
      status: tab.props.name

    })
  } else {
    getOrderDataOther({
      shopAddressId: mainstore.userinfo.shopAddress.id,
    })
  }

  // 在这里执行你的数据库查询逻辑
};

let staffInfoData = ref([]);//用户的数据


//   // 上传成功的回调
let uploadSuccess = () => {
  usermanage.getUserData()
}


//   // 添加新员工数据 
let addStaffData = () => {
  userY.value.acceptParams(true)
}

//   //打开设置员工身份的拉窗  方法是表格中触发的
// 查询订单的数据
let searchOrderData = (data) => {
  activeIndex.value = data.status
  if (data.status) {
    getOrderDataOther({
      shopAddressId: mainstore.userinfo.shopAddress.id,
      status: data.status,
      userPhone: data.userPhone,
      goodsName: data.goodsName
    })
  } else {
    getOrderDataOther({
      shopAddressId: mainstore.userinfo.shopAddress.id,
      userPhone: data.userPhone,
      goodsName: data.goodsName
    })
  }
  console.log(data.status, "查询订单的数据")
  // Iden.value.openDoorTrue(true)
}

//商家接单
let receiveOrder = async (orderNumber) => {

  let res = await goodsinfo.modifyShopOrder({
    status: 2,
    shopAddressId: mainstore.userinfo.shopAddress.id,
    orderNumber: orderNumber
  })
  if (res.code == 200) {
   
    // console.log(res, "接单2七二ew")
    getOrderData({
    shopAddressId: mainstore.userinfo.shopAddress.id,

  })
    ElMessage({
      showClose: true,
      message: res.message,
      type: 'success',
    })
  } else {
    ElMessage({
      showClose: true,
      message: res.message,
      type: 'error',
    })
  }
 
}


//窗口数据


const dialogVisible = ref(false);
const remark = ref('');

const handleClose = () => {
  dialogVisible.value = false;
};

const handleConfirm = () => {
  // 处理接单逻辑
  console.log('接单');
  // dialogVisible.value = false;
};

const handleReject = () => {
  console.log('拒单');
};




let openAddDoor = (e) => {
  console.log(e, "fefe1")
  orderDetailData.value = e
  dialogVisible.value = true;
  // userY.value.acceptParams(true)
}

// let staffInfoData = computed(() => {
//   // return mStaff.staffInfo
//   // console.log("啦啦啦啦")
//   return usermanage.userinfo
// })
// let mandtabData  =()=>{
//   [
//   { key:0,label: '全部订单', count: 0 },
//   {key:7, label: '待接单', count: 0 }, // 示例数据
//   { key:2,label: '待派送', count: 0 }, // 示例数据
//   { key:3,label: '待自提', count: 0 }, // 示例数据
//   { key:4,label: '派送中', count: 0 }, // 示例数据
//   {key:5, label: '已完成', count: 0 }, // 示例数据
//   {key:6, label: '已取消', count: 0 }, // 示例数据
// ]
// }


// 获取订单数据

let getOrderDataOther = async (data) => {

  console.log(data)
  let res = await goodsinfo.getOrdersByShopAddressId(data)
  if (res.code == 200) {
    // console.log(res.data,"res.data")
    staffInfoData.value = res.data

  } else {
    staffInfoData.value = []
  }
  // console.log(res,"订单数据",mainstore.userinfo.shopAddress.id)
}

let getOrderData = async (data) => {

  console.log(data)
  let res = await goodsinfo.getOrdersByShopAddressId(data)
  if (res.code == 200) {
    // console.log(res.data,"res.data")
    countOrdersByStatus(res.data)
    staffInfoData.value = res.data

  } else {
    staffInfoData.value = []
  }
  // console.log(res,"订单数据",mainstore.userinfo.shopAddress.id)
}

//一页多少数据
// let changeSizePage = (size) => {
//   take.value = size
//   current.value = 1
//   getStatffInfo()
// }
//当前是第几页
// let changeCurrentPage = (cur) => {

//   current.value = cur
//   getStatffInfo()
// }

let countOrdersByStatus = (data) => {
  // 初始化一个对象来存储统计数据
  // let statusCount = {
  //   "0":0,
  //   "1":0,
  //   "2":0,
  //   "3":0,
  //   "4":0,
  //   "5":0,
  //   "6":0,
  //   "7":0

  // }
  let statusCount = {
    0: 0,
    1: 0,
    2: 0,
    3: 0,
    4: 0,
    5: 0,
    6: 0,
    7: 0

  }
  // 遍历外层数组
  data.forEach(order => {
    const status = order.status + "";

    // 如果 status 不存在于统计对象中，则初始化为 0
    if (!statusCount[status]) {
      statusCount[status] = 0;
    }

    // 对应状态的计数加 1
    statusCount[status]++;
  });

  console.log(statusCount, "statusCount")

  statuses.value.forEach((item) => {
    // console.log(item.key,statusCount[item.key],"fefes")
    item.count = statusCount[item.key]

    // console.log(item,"这是item对象")

    // console.log(item.key==statusCount[item.key])
  })

  // return statusCount;
}

onMounted(() => {
  // getStatffInfo()
  // staffInfoData = usermanage.userinfo
  getOrderData({
    shopAddressId: mainstore.userinfo.shopAddress.id,


  })
  usermanage.getUserData()
  // staffInfoData = usermanage.userinfo

  // console.log(staffInfoData,"挂在的时候就调用了")
  // console.log(usermanage)
  // 监听分页的事件
  // proxy.$Bus.on("changeCurrentPage", changeCurrentPage)
  // proxy.$Bus.on("changeSizePage", changeSizePage)
})

//   onBeforeUnmount(() => {
//     // proxy.$Bus.off("changeCurrentPage", changeCurrentPage)
//     // proxy.$Bus.off("changeSizePage", changeSizePage)
//   })
</script>
  
<style lang="scss" scoped>@import "./index.scss";</style>

